﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>带渐变与滑动的图片展示</title>
    <script type="text/javascript" src="demo.js">
    </script>
    <link href="demo.css" rel="stylesheet" />
    <script>
        window.onload = function () {
            let oMain = document.getElementById('main');
            let oUl = oMain.getElementsByTagName('ul')[0];
            let aLi = oUl.getElementsByTagName('li');

            let oBtn = document.getElementById('btn');
            let aA = oBtn.getElementsByTagName('a');

            let iNow = 1;
            let iNow2 = 1;
            let bBtn = true;
            let num = 3;
            let timer = null;

            oUl.style.width = aLi.length * aLi[0].offsetWidth + 'px';

            aA[0].onclick = function () {
                if (bBtn) {
                    clearInterval(timer);
                    timer = setInterval(autoPlay, 3000);
                    for (let i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'relative';
                        aLi[i].style.filter = 'alpha(opacity=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    if (iNow == 1) {
                        iNow = aLi.length;
                        aLi[aLi.length - 1].style.position = 'relative';
                        aLi[aLi.length - 1].style.left = -aLi.length * aLi[0].offsetWidth + 'px';
                    }
                    else {
                        iNow--;
                    }
                    iNow2--;
                    toRun();
                    bBtn = false;
                }
            };
            aA[aA.length - 1].onclick = function () {
                if (bBtn) {
                    clearInterval(timer);
                    timer = setInterval(autoPlay, 3000);
                    for (let i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'relative';
                        aLi[i].style.filter = 'alpha(opacity=100)';
                        aLi[i].style.opacity = 1;
                    }
                    oUl.style.left = -(iNow - 1) * aLi[0].offsetWidth + 'px';
                    if (iNow == aLi.length) {
                        iNow = 1;
                        aLi[0].style.position = 'relative';
                        aLi[0].style.left = aLi.length * aLi[0].offsetWidth + 'px';
                    }
                    else {
                        iNow++;
                    }
                    iNow2++;
                    toRun();
                    bBtn = false;
                }
            };

            for (let i = 1; i < aA.length - 1; i++) {
                aA[i].index = i;
                aA[i].onclick = function () {
                    clearInterval(timer);
                    timer = setInterval(autoPlay, 3000);
                    iNow = this.index;
                    iNow2 = this.index;
                    toShow();
                };
            }

            function toRun() {
                for (let i = 1; i < aA.length - 1; i++) {
                    aA[i].className = 'index';
                }
                aA[iNow].className = 'active';

                startMove(oUl, { left: -(iNow2 - 1) * aLi[0].offsetWidth }, function () {
                    if (iNow == 1) {
                        aLi[0].style.position = 'relative';
                        aLi[0].style.left = 0;
                        oUl.style.left = 0;
                        iNow2 = 1;
                    }
                    else if (iNow == aLi.length) {
                        aLi[aLi.length - 1].style.position = 'relative';
                        aLi[aLi.length - 1].style.left = 0;
                        oUl.style.left = -(aLi.length - 1) * aLi[0].offsetWidth + 'px';
                        iNow2 = aLi.length;
                    }

                    for (let i = 0; i < aLi.length; i++) {
                        aLi[i].style.position = 'absolute';
                        aLi[i].style.filter = 'alpha(opacity=0)';
                        aLi[i].style.opacity = 0;
                    }
                    oUl.style.left = 0;
                    aLi[iNow2 - 1].style.zIndex = num++;
                    aLi[iNow2 - 1].style.filter = 'alpha(opacity=100)';
                    aLi[iNow2 - 1].style.opacity = 1;

                    bBtn = true;
                });
            }

            function toShow() {
                for (let i = 1; i < aA.length - 1; i++) {
                    aA[i].className = 'index';
                }
                for (let i = 0; i < aLi.length; i++) {
                    startMove(aLi[i], { opacity: 0 });
                }
                aA[iNow].className = 'active';
                startMove(aLi[iNow - 1], { opacity: 100 }, function () {
                    aLi[iNow - 1].style.zIndex = num++;

                });
            }

            timer = setInterval(autoPlay, 3000);

            function autoPlay() {
                if (iNow == aLi.length) {
                    iNow = 1;
                    iNow2 = 1;
                }
                else {
                    iNow++;
                    iNow2++;
                }

                toShow();
            }
        };
    </script>
</head>
<body>
    <div id="main">
        <ul>
            <li style="z-index:2; filter:alpha(opacity=100); opacity:1;"><a href="http://www.miaov.com/free_experience.html.php"><img src="1.jpg" /></a></li>
            <li><a href="http://www.miaov.com/course_detail_1.html.php"><img src="2.jpg" /></a></li>
            <li><a href="http://www.miaov.com/video.html.php?type=1"><img src="3.jpg" /></a></li>
            <li><a href="http://www.miaov.com/video.html.php?type=2"><img src="4.jpg" /></a></li>
        </ul>
    </div>
    <div id="btn">
        <a class="prev" href="javascript:;"></a>
        <a class="active" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="index" href="javascript:;"></a>
        <a class="next" href="javascript:;"></a>
    </div>
</body>
</html>